<template>
	<view>
		<view class="tab">
			<view class="tabItem" :class="tabIndex == index ? 'tabItem_active':''" v-for="(item,index) in tabList" :key="index" @tap="switchTab(index)">{{item.name}}</view>
		</view>
		<my-article :list="artList" :status="status" :contentText="contentText" stateType="0" :users_type="3"></my-article>
	</view>
</template>

<script>
	import myArticle from '@/components/school/artlist';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default{
		components: {
			myArticle,
			uniLoadMore
		},
		data() {
			return {
				tabList: [{
					name: '全部',
					state: ''
				},{
					name: '审核中',
					state: ''
				},{
					name: '已通过',
					state: ''
				},{
					name: '退回',
					state: ''
				}],
				tabIndex: 0,
				artList: [], //文章列表
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.artList=[];
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getList(this.tabIndex);
			}, 500);
		},
		methods: {
			switchTab(index) {
				this.page = 1;
				this.tabIndex = index;
				this.artList = []
				if (this.tabIndex != 0) {
					this.getList(index)
				} else {
					this.getList()
				}
			},
			getList(is_check) {
				var data = {
					users_type: 3,
					is_check: is_check,
					is_user: 1,
					page: this.page,
					pagesize: 9,
					user_id: uni.getStorageSync('userInfo').id
				}
				this.$zapi.apiPost('user/article.Lists/articleList',data).then(res => {
					if (res.data.code == 200 && res.data.data.data.length > 0) {
						this.artList = this.artList.concat(res.data.data.data)
						this.status = 'more';
					} else {
						this.status = 'noMore'
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
	}
	/* 选项卡 */
	.tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		background-color: #FFFFFF;
	
		.tabItem {
			color: #666666;
			font-size: 36upx;
			text-align: center;
			position: relative;
			padding: 18upx 0;
		}
	
		.tabItem_active {
			color: #FF9900;
		}
	
		.tabItem_active:before {
			position: absolute;
			content: '';
			width: 46upx;
			height: 6upx;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			background: #FF9900;
			border-radius: 4upx;
		}
	}
	.news,.news_other{
		padding-top: 0 !important;
	}
</style>
